<template>
  <el-card>
    <div>
      <div class="title">个人信息</div>
      <div style="float: right; margin-right: 50px"><el-button type="success" @click="updateDialogShow=true">修改个人信息</el-button></div>

    </div>
    <div class="info">
      <div class="username">用户名： {{ userInfo.username }}</div>
      <div v-if="userInfo.status == 1">
        <div>真实姓名： {{ userInfo.realname }}</div>
        <div>性别： {{ userInfo.sex }}</div>
      </div>
      <div v-else>
        <el-link type="primary" style="font-size: 18px" @click="authDialogShow=true">您还未认证，点击认证</el-link>
      </div>
      <div class="phone">手机号： {{ userInfo.phone }}</div>
      <div class="email">邮箱： {{ userInfo.email }}</div>
      <div >身份证号： {{ userInfo.idCard }}</div>
      <div class="money" >账户余额： ￥{{ userInfo.money }}</div>
    </div>
  </el-card>

  <!-- 认证信息对话框开始 -->
  <el-dialog v-model="authDialogShow" title="信息认证" width="800px">
    <el-form>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="UpdateInfo.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-input v-model="UpdateInfo.sex" placeholder="请输入性别" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="身份证号" label-width="20%">
        <el-input v-model="UpdateInfo.idCard" placeholder="请输入身份证号" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="authDialogShow = false">取消</el-button>
        <el-button type="primary" @click="auth">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 认证信息对话框结束 -->
  <!-- 修改信息对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="800px">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input v-model="UpdateInfo.username" placeholder="请输入用户名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="UpdateInfo.phone" placeholder="请输入电话" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="UpdateInfo.email" placeholder="请输入邮箱" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改信息对话框结束 -->

</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";

//修改用户信息对话框
const updateDialogShow = ref(false);
//认证对话框
const authDialogShow = ref(false);

const userInfo = ref({
  username: null,
  realname: null,
  sex: null,
  idCard: null,
  phone: null,
  email: null,
  regTime: null,
  money: 0.00,
  status: 0,
});
const UpdateInfo = ref({
  username: null,
  realname: null,
  sex: null,
  idCard: null,
  phone: null,
  email: null,
  regTime: null,
  money: 0.00,
  status: 0,
});

//获取用户信息
function getUserInfo() {
  userApi.getInfo().then(resp => {
    userInfo.value = resp.data;
    UpdateInfo.value = resp.data;
  });
}
getUserInfo();
//用户认证
function auth() {
  UpdateInfo.value.status = 1;
  userApi.update(UpdateInfo.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success("认证成功");
          authDialogShow.value = false;
          UpdateInfo.value = ({
            username: null,
            realname: null,
            sex: null,
            idCard: null,
            phone: null,
            email: null,
            regTime: null,
            money: 0.00,
            status: 0
          });
          getUserInfo();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
//修改信息
function update() {
  userApi.update(UpdateInfo.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success("修改成功");
          updateDialogShow.value = false;
          UpdateInfo.value = ({
            username: null,
            realname: null,
            sex: null,
            idCard: null,
            phone: null,
            email: null,
            regTime: null,
            money: 0.00,
            status: 0
          });
          getUserInfo();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

</script>

<style scoped>
.info div {
  font-size: 20px;
  margin-bottom: 20px;
}
.title {
  color: var(--theme-color);
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}
.money {
  color: #06de2a;
  font-weight: bold;
}

</style>